<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-position="labelPosition"
        class="ruleForm"
      >
        <el-form-item label="是否向同锦开放平台开发票" prop="accountType">
          <el-radio-group v-model="ruleForm.accountType">
            <el-radio :label="1">可以开票</el-radio>
            <el-radio :label="2">不可以开票</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="收款方式" prop="resource">
          <el-radio-group v-model="alPay">
            <el-radio :label="1">支付宝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="收款名称" prop="accountName">
          <el-input
            v-model="ruleForm.accountName"
            style="width: 280px"
          ></el-input>
        </el-form-item>
        <el-form-item label="收款账户" prop="accountNubmer">
          <el-input
            v-model="ruleForm.accountNubmer"
            style="width: 280px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            v-if="!ruleForm.id"
            >确认提交</el-button
          >
          <el-button
            type="primary"
            @click="handleEdit('ruleForm')"
            v-if="ruleForm.id"
            >确认提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {
  createAccount,
  getAccount,
  updateAccount,
} from "@/api/distribute/order";
import { getUserProfile } from "@/api/system/user";

export default {
  name: "NamesIndex",

  data() {
    return {
      labelPosition: "left",
      ruleForm: {
        accountType: 2,
      },
      alPay: 1,
      rules: {
        accountName: [
          { required: true, message: "收款名称不能为空", trigger: "change" },
        ],
        accountNubmer: [
          { required: true, message: "收款账户不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    // 用户信息
    getUserInfo() {
      getUserProfile().then((response) => {
        this.ruleForm.userId = response.data.id;
        this.getList();
      });
    },
    // 增加
    submitForm(formName) {
      const that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          createAccount(this.ruleForm)
            .then((res) => {
              this.$message({
                message: "提交成功",
                type: "success",
              });
              that.getList();
            })
            .catch((error) => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 查询
    getList() {
      const reqBody = {
        userId: this.ruleForm.userId,
      };
      getAccount(reqBody)
        .then((res) => {
          console.log(res.data);
          this.ruleForm = res.data;
          this.ruleForm.accountType = Number(res.data.accountType);
        })
        .catch((error) => {});
    },
    // 修改
    handleEdit(row) {
      console.log("row", this.ruleForm);
      const that = this;
      updateAccount(this.ruleForm)
        .then((res) => {
          if (res.code === 0) {
            this.$message({
              message: "提交成功",
              type: "success",
            });
            that.getList();
          }
        })
        .catch((error) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .ruleForm {
    margin-left: 200px;
  }
}
</style>
